<template>
  <div class="wrap">
    <bread-crumb :titleArr="titleArr" @back="back"></bread-crumb>
    <div class="data">
      <affix :label="$t('monitor.multiChannelMonitorList')" class="monitor-table">
        <table-data :allList="allServiceNums">
          <template slot="thead">
            <th><div class="cell" v-once>{{$t('report.imAccessId')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.sessionNumToday')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.waitingSessionNum')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.dealingSession')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.sessionNumTodayGet')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.sessionNumTodayAnswer')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.messageSession')}}</div></th>
          </template>
          <template slot="tbody" slot-scope="slotProps">
            <tr-common  v-for="(one, index) in slotProps.current"
                        :key="index"
                        :one="$store.state.monitor.table.MultiChannel[one]"
                        v-if="$store.state.monitor.table.MultiChannel[one]"
                        :header="header.multiChannel"
            ></tr-common>
          </template>
        </table-data>
      </affix>
      <affix :label="$t('monitor.multiChannelSkillMonitorList')" class="monitor-table">
        <table-data :allList="allQueue">
          <template slot="thead">
            <th><div class="cell" v-once>{{$t('monitor.skillGroupName')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.loginAgent')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.openAutoReceiveAgent')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.idleAgent')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.waitingSessionNum')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.connectSessionNum')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.unAccessSession')}}</div></th>
            <th><div class="cell" v-once>{{$t('monitor.messageSession')}}</div></th>
          </template>
          <template slot="tbody" slot-scope="slotProps">
            <tr-queue-im  v-for="(one, index) in slotProps.current"
                        :key="index"
                        :one="$store.state.monitor.table.MultiChannelSkill[one]"
                        v-if="$store.state.monitor.table.MultiChannelSkill[one]"
                        :header="header.multiChannelSkill"
            ></tr-queue-im>
          </template>
        </table-data>
      </affix>
    </div>
  </div>
</template>
<script>
  import Affix from '../../ui-modules/affix/Affix'
  import BreadCrumb from '../../ui-modules/breadCrumb/BreadCrumbConfig'
  import tableData from './base/tableWrap'
  import trCommon from './base/TrCommon'
  import trQueueIm from './base/TrQueueIm'
  export default {
    name: 'webchatData',
    data () {
      return {
        titleArr: [this.$t('monitor.dataSummary'), this.$t('monitor.chatDataSummary')],
        allQueue: [],
        allServiceNums: [],
        header: {
          multiChannel: [
            {prop: 'name'},
            {prop: 'newSession'},
            {prop: 'waitClaim'},
            {prop: 'dealingSession'},
            {prop: 'accessSession'},
            {prop: 'closeSession'},
            {prop: 'messageSession'}
          ],
          multiChannelSkill: [
            {prop: 'DisplayName'},
            {prop: 'checkInAgent', tooltip: true},
            {prop: 'autoClaimDisplay', tooltip: true},
            {prop: 'idleAgent', tooltip: true},
            {prop: 'waitClaim', color: 'red'},
            {prop: 'manualSession'},
            {prop: 'undealSession'},
            {prop: 'messageSession'}
          ]
        }
      }
    },
    props: {
    },
    components: {
      Affix,
      BreadCrumb,
      tableData,
      trCommon,
      trQueueIm
    },
    inject: [],
    methods: {
      back () {
        this.$emit('back')
      }
    },
    beforeMount () {
      this.allQueue = Object.keys(this.$store.state.monitor.table.MultiChannelSkill)
      this.allServiceNums = Object.keys(this.$store.state.monitor.table.MultiChannel)
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl';
  .wrap
    padding 10px 16px 20px
  .data
    padding 10px
  .monitor-table
    padding-bottom 40px
</style>
